<!DOCTYPE html>
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>自动部署</title>
    <link rel="stylesheet" th:href="@{/static/css/layui.css}" href="css/layui.css">
    <style>
        .restore {
            color: #01AAED;
            cursor: pointer;
        }
        table th,td{
            text-align: center !important;
        }

        .layui-layer-content {
            word-break: break-all;
            white-space: pre-line;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <div th:replace="fragment/common::top">顶部</div>

    <div th:replace="fragment/common::left">菜单</div>

    <div class="layui-body">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>版本列表</legend>
        </fieldset>
        <div class="layui-form">
            <table class="layui-table">
                <colgroup>
                    <col width="50%">
                    <col>
                </colgroup>
                <thead>
                <tr>
                    <th>备份包版本</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="list" style="display: none">
                <tr v-for="item in items">
                    <td>{{item}}</td>
                    <td><span class="restore" @click="restore(item)">恢复</span></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script th:src="@{/static/js/layui.js}" src="js/layui.js"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script>
    layui.use(['element', 'upload'], function () {
        var $ = layui.jquery;
        var upload = layui.upload;

        var vm = new Vue({
            el: "#list",
            data: {
                items: []
            },
            methods: {
                restore: function (filename) {
                    var index = layer.confirm('确认执行该操作吗？', {
                        btn: ['确定', '取消']
                    }, function () {
                        layer.close(index);
                        layer.load();
                        $.get(ctx + "/recoveryPackage", {fileName: filename}, function (data) {
                            layer.closeAll('loading');
                            if (data.status == 1) {
                                layer.open({title: "成功", content: data.logs});
                            } else {
                                layer.open({title: "失败", content: data.logs});
                            }
                        })
                    });
                }
            }
        });

        function getData() {
            $.get(ctx + "/dep/list", function (data) {
                if (data.state) {
                    vm.items = data.model;
                    $("#list").show();
                } else {
                    layer.msg(data.message, {icon: 2});
                }
            });
        }

        getData();
    });
</script>
</body>
</html>